<template>
  <div class="menu">
    <div class="name">
      <div v-if="!menu.link" class="name">{{ menu.name }}</div>
      <router-link v-if="menu.link" :to="{ path: menu.link }" class="name">{{
        menu.name
      }}</router-link>
    </div>

    <div class="children" v-if="menu.children">
      <Menu v-for="child in menu.children" :key="child.id" :menu="child"></Menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "Menu",
  props: ["menu"],
};
</script>

<style scoped lang="scss">
.menu {
  .name {
    color: #fff;
  }

  &:not(:hover) .children {
    display: none;
  }
}

// .menu {
//   .name {
//     color: #fff;
//   }
//   .children {
//     display: none;
//   }
//   &:hover > .children {
//     display: block;
//   }
// }
</style>
